<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="keywords" content="登录">
        <meta name="description" content="用来登录学校官网">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
         body {
            width: 414px;
            height: 896px;
           }
            .university {
                
                padding:24px;
                margin:100px auto;
               
                border-radius:30px;
                background-size: 300px auto;
               
            }
            * {
                margin:0;
                padding:0;
                box-sizing: border-box;
            }
            .container {
  width: 414px;
  height: 2000px;
  margin: 0px auto;
  background-color: #fff;
 
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}


.profile-header {
  position: relative;
}

.profile-bg img {
  width: 400px;
  height: 300px;
  object-fit: cover;
  margin-top: 20px;
  
}

.profile-info {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 100px;
  left: 16px;
  display: flex;
  align-items: center;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.user-details {
  margin-left: 10px;
  color: #fff;
  margin-bottom: 10px;
}

.user-name {
  font-size: 30px;
  font-weight: bold;
}

.user-extra {
  font-size: 12px;
  opacity: 0.9;
}

.school-info {
  font-size: 12px;
  margin-top: 2px;
}

.school-info span {
  font-size: 10px;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 2px 4px;
  border-radius: 4px;
  margin-left: 4px;
}

.edit-btn {
  position: absolute;
  right: 16px;
  top: 110px;
  background-color: rgba(255, 255, 255, 0.8);
  color: #333;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.stats {
  width: 290px;
  height: 200px;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  padding: 30px 0;
  background-color: #fff;
  margin-bottom: 20px;
  padding: 6px;
  
}

.stat-item {
  text-align: center;
  font-size: 30px;
  color: #666;
  padding: 8px;
  margin-left: 18px;

}

.function-list {
  list-style: none;
  margin-top: 80px;
}

.function-list li {
  display: flex;
  align-items: center;
  padding: 30px;
  border-bottom: 1px solid #f2f2f2;
  color: #333;
  font-size: 30px;
  margin-top: 50px;
}

.icon {
  display: inline-block;
  width: 60px;
  height: 60px;
  margin-right: 10px;
  background-size: cover;
}


.card-icon {
  background-color: #87d068;
  background: url(https://gd-hbimg.huaban.com/de4575ea5a1cdc59969d4f296c2e7a80ebe6fea1128d-Pc102k) no-repeat center / contain;;
}

.remind-icon {
  background-color: #f50;
  background: url(https://gd-hbimg.huaban.com/1f82b7feee5a61aec45f33d5e085b47e1c6b6dbe2ea6-HLzVY9) no-repeat center / contain;
}

.create-icon {
  background-color: #ffd835;
  background: url(https://gd-hbimg.huaban.com/8d721271e83049d7774cb65b02dbe59ee80f4c832ca1d-ae4pyg) no-repeat center / contain;
}

.resume-icon {
  background-color: #2db7f5;
  background: url(https://gd-hbimg.huaban.com/9f9403c86e3562363ca8d002f3fc2c104bd3b8f02d8b5-CFg23r) no-repeat center / contain;
}

.feedback-icon {
  background-color: #108ee9;
  background: url(https://gd-hbimg.huaban.com/03200db5850a377f60d6337fe71563a98fac9bd432d89-69wgIJ) no-repeat center / contain;
}

.setting-icon {
  background-color: #999;
  background: url(https://gd-hbimg.huaban.com/6926e9b9859f1ea9cd3dc1ca94b881053b3c36f933fff-7ALpHj) no-repeat center / contain;
}


.bottom-nav {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  border-top: 0px solid #f2f2f2;
  margin-top: 100px;
  padding: 3px;
  width: 200px;
  margin-left: 0px;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  color: #999;
  text-decoration: none;
  font-size: 20px;
}

.nav-icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  background-size: cover;
}


.home-icon {
  background-color: #999;
 background: url(https://gd-hbimg.huaban.com/dc74bc7cc8bfefc6c018efa7723308eaa2e6b9ea26651-L9gqj8) no-repeat center / contain;
 width: 40px;
 height: 40px;
 margin-left: 2px;
 margin-right: 2px;
}

.campus-icon {
  background-color: #999;
  background: url(https://gd-hbimg.huaban.com/5451b62c94e6fc34f23072c9e624b767e0e5445927994-L2PGW1) no-repeat center / contain;
  width: 40px;
 height: 40px;
}

.app-icon {
  background-color: #999;
 background: url(https://gd-hbimg.huaban.com/98260c5f4e657a430d0d8a3ece65bfe7f8237a082e5bf-Ng6xIo) no-repeat center / contain;
 width: 40px;
 height: 40px;
}

.msg-icon {
  background-color: #999;
  background: url(https://gd-hbimg.huaban.com/6bb8fe34e4e0257b6dffbfe855853bea58ffed882b09c-dYUNho) no-repeat center / contain;
width: 40px;
 height: 40px;
}

.mine-icon {
  background-color: #333;
 background: url(https://gd-hbimg.huaban.com/9f9403c86e3562363ca8d002f3fc2c104bd3b8f02d8b5-CFg23r) no-repeat center / contain;
 width: 40px;
 height: 40px;
}

.badge {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  background-color: red;
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  position: relative;
  top: -24px;
  left: 4px;
}

.active {
  color: #333;
}
            
           
        </style>
    </head>
    <body>
        <div class="container">
  
    <div class="profile-header">
      <div class="profile-bg">
        
        <img src="https://gd-hbimg.huaban.com/73b2c01bb329ad1fdcee6b465165c795cb1606ebfab2-71HQcA_fw1200" alt="背景图">
      </div>
      <div class="profile-info">
        
        <img class="avatar" src="https://gd-hbimg.huaban.com/73b2c01bb329ad1fdcee6b465165c795cb1606ebfab2-71HQcA_fw1200" alt="头像">
        <div class="user-details">
          <div class="user-name">黎静</div>
          <div class="user-extra">学号：24122148</div>
          <div class="school-info">联合创新产业 <span>学院学生</span></div>
        </div>
        
      </div>
      <div class="stats">
        <div class="stat-item">11<br>关注</div>
        <div class="stat-item">28<br>粉丝</div>
        <div class="stat-item">2001<br>积分</div>
        <div class="stat-item">520<br>关注的话题</div>
      </div>
    </div>
    
    <ul class="function-list">
      <li><span class="icon card-icon"></span>校园卡</li>
      <li><span class="icon remind-icon"></span>提醒管理</li>
      <li><span class="icon create-icon"></span>创作中心</li>
      <li><span class="icon resume-icon"></span>我的简历</li>
      <li><span class="icon feedback-icon"></span>帮助反馈</li>
      <li><span class="icon setting-icon"></span>设置</li>
    </ul>
    
    <div class="bottom-nav">
      <a href="首页.html" class="nav-item">
        <span class="nav-icon home-icon"></span>首页
      </a >
      <a href="校园.html" class="nav-item">
        <span class="nav-icon campus-icon"></span>校园
      </a >
      <a href="登录.html" class="nav-item">
        <span class="nav-icon app-icon"></span>登录
      </a >
      <a href="首页.html" class="nav-item">
        <span class="nav-icon msg-icon"></span>消息 
      </a >
      <a href="个人中心.html" class="nav-item active">
        <span class="nav-icon mine-icon"></span>我的
      </a >
    </div>
  </div>
    </body>
</html>